<template>
	<view class="page-wrapper">
		<view class="address-item">
			<view class="address-item-top">
				<view class="address-item-top-left">
					收货人
				</view>
				<view class="address-item-top-right">
					<uniEasyinput class="uni-mt-5" type="text" trim="all" :inputBorder="false" v-model="name"
						placeholder="请填写收货人姓名"></uniEasyinput>
				</view>
			</view>
			<view class="horizontal-line"></view>
			<view class="address-item-top">
				<view class="address-item-top-left">
					手机号
				</view>
				<view class="address-item-top-right">
					<uniEasyinput type="number" class="uni-mt-5" :inputBorder="false" trim="all" v-model="phone"
						placeholder="请填写收货人电话号码"></uniEasyinput>
				</view>
			</view>

		</view>


		<view class="address-item2">
			<view class="title">
				地区选择
			</view>
			<view class="address-item-top">
				<view class="address-item-top-left">
					所在地区
				</view>
				<view class="address-item-top-right">
					<YmAddress @Address="Address" @deleteAddress="deleteAddress"></YmAddress>
				</view>
			</view>

			<view class="address-item-top">
				<view class="address-item-top-left">
					详细地址
				</view>
				<view class="address-item-top-right1">
					<uniEasyinput type="textarea" v-model="addressw" placeholder="小区、门牌号"></uniEasyinput>
				</view>
			</view>

		</view>


		<view class="address-item3">

			<view class="address-item-top">
				<view class="address-item-top-left">
					标签
				</view>
				<view class="address-item-top-right">
					<view class="box" :class="{ 'selected': item.selected }" v-for="(item,index) in tagArr" :key="index"
						@click="selectTag(item)">
						{{item.name}}
					</view>

				</view>
			</view>


		</view>

		<view class="add-address-btn" @click="submitData">确认</view>
	</view>

</template>

<script setup>
	import uniEasyinput from "@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue"
	import YmAddress from '@/components/addrSelect/address.vue'
	// import unidatapicker from "@/uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue"
	// import CityRows from '@/common/address.js'
	import {
		userInfo
	} from "@/stores/userInfo"
	import {
		onLoad,
		onShow,
		onUnload
	} from '@dcloudio/uni-app';



	import {
		computed,
		ref,
		getCurrentInstance
	} from "vue"

	// let CityRows1 = computed(()=>{
	// 	return CityRows.data
	// })
	let UserInfo = userInfo()

	let name = ref("")
	let phone = ref("")
	let AddressInfo = ref("")
	let addressw = ref('')
	let type = ref(0)
	let tagArr = ref([{
			type1: 1,
			name: "家",
			selected: false
		},
		{
			type1: 2,
			name: "公司",
			selected: false
		},
		{
			type1: 3,
			name: "学校",
			selected: false
		},

	])


	let status = ref(0)
	let addressId = ref(0)

	let onchange = (e) => {
		console.log("点击改变")
	}

	let onnodeclick = (e) => {
		console.log(e, "这又是什么")
	}

	// 地址选择
	let Address = (e) => {
		console.log(e, "地址选择")
		const result = e.map(item => item.name).join(""); // 使用空格分隔
		AddressInfo.value = result
		console.log(result, "地址选择")
	}


	let selectTag = (e) => {
		// console.log(e, "选择标签")
		// 切换当前标签的选中状态
		type.value = e.type1
		tagArr.value.forEach((tag) => {
			tag.selected = (tag.type1 === e.type1); // 只有当前点击的标签为 true，其他为 false
		});
	}

	// onShow(()=>{
	// 	console.log(CityRows.data,"CityRows")
	// })

	//添加地址的操作函数
	let operateAddresFun = async (data) => {

		if (name.value == "") {
			uni.showToast({
				title: '姓名不能为空', // 提示内容
				icon: 'error', // 图标类型：success、loading、none
				duration: 2000 // 显示时长（毫秒）
			});
		} else if (phone.value == "") {
			uni.showToast({
				title: '电话号不能为空', // 提示内容
				icon: 'error', // 图标类型：success、loading、none
				duration: 2000 // 显示时长（毫秒）
			});
		} else if (AddressInfo.value == "") {
			uni.showToast({
				title: '请选择地区', // 提示内容
				icon: 'error', // 图标类型：success、loading、none
				duration: 2000 // 显示时长（毫秒）
			});
		} else if (addressw.value == "") {
			uni.showToast({
				title: '详细地址不能为空', // 提示内容
				icon: 'error', // 图标类型：success、loading、none
				duration: 2000 // 显示时长（毫秒）
			});
		} else {


			let res = await UserInfo.addUserAddressApi(data)
			if (res) {
				uni.showToast({
					title: '保存成功', // 提示内容
					icon: 'success', // 图标类型：success、loading、none
					duration: 2000 // 显示时长（毫秒）
				});
				uni.navigateBack({
					delta: 1
				});
			} else {
				uni.showToast({
					title: '报错错误', // 提示内容
					icon: 'error', // 图标类型：success、loading、none
					duration: 2000 // 显示时长（毫秒）
				});
			}
		}


	}


	let submitData =  () => {
		let data = {
			receiverName: name.value,
			receiverPhone: phone.value,
			addressDetail: AddressInfo.value + addressw.value,
			type: type.value,
			wxLoginCode: UserInfo.userinfoData.wxLoginCode,
		}

		if (status.value == 1) {
			data["status"] = 1
			data['addressId'] = addressId.value
			// console.log(data,"data")
			operateAddresFun(data)
		}else{
			operateAddresFun(data)
		}





	}

	onLoad((option) => {
		const instance = getCurrentInstance().proxy
		const eventChannel = instance.getOpenerEventChannel();
		eventChannel.on('acceptDataFromOpenerPage', async (data) => {
			if (data.data) {
				console.log(data.data, "resulst")
				name.value = data.data.receiverName
				phone.value = data.data.receiverPhone
				type.value = data.data.type
				addressId.value = data.data.id
				status.value = 1

				tagArr.value.forEach((tag) => {
					tag.selected = (tag.type1 === data.data.type); // 只有当前点击的标签为 true，其他为 false
				});
			} else {
				console.log("不打印")
			}

		})
	})

	let deleteAddress = () => {
		AddressInfo.value = ""
	}
</script>

<style lang="scss" scoped>
	$text-color1: #333333;
	$text-color2: #666;


	.page-wrapper {
		padding: 20rpx;
		overflow-y: scroll;
		height: calc(100vh - 200rpx - 110rpx);


		.address-item {
			width: 100%;
			height: 220rpx;
			padding: 15rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			/* 设置为上下布局（垂直方向） */
			justify-content: space-between;
			/* 可选：调整子元素之间的间距 */
			box-shadow: 0 20rpx 20rpx 6rpx rgba(51, 51, 51, 0.1);
			padding: 8px;

			.address-item-top {
				display: flex;
				justify-items: center;
				align-items: center;

				.address-item-top-left {

					font-size: 14px;
				}

				.address-item-top-right {}
			}

			.horizontal-line {
				height: 1px;
				/* 横线高度 */
				background-color: #ccc;
				/* 横线颜色，可自定义 */
				width: 100%;
				/* 横线宽度，可以根据需求调整 */
				// margin: 20px 0; /* 上下间距，可根据需要修改 */
				margin-top: 5px;
			}



		}


		.address-item2 {
			width: 100%;
			// height: 220rpx;
			padding: 15rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			/* 设置为上下布局（垂直方向） */
			// justify-content: space-between; /* 可选：调整子元素之间的间距 */
			box-shadow: 0 20rpx 20rpx 6rpx rgba(51, 51, 51, 0.1);
			padding: 8px;

			.title {
				font-weight: bold;
				font-size: 16px;
				height: 40px;
			}

			.address-item-top {
				display: flex;
				justify-items: center;
				align-items: center;

				.address-item-top-left {
					width: 20%;
					font-size: 14px;
				}

				.address-item-top-right1 {
					width: 80%;
					margin-top: 20px;

				}
			}
		}

		.address-item3 {
			width: 100%;
			// height: 220rpx;
			padding: 15rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			/* 设置为上下布局（垂直方向） */
			// justify-content: space-between; /* 可选：调整子元素之间的间距 */
			box-shadow: 0 20rpx 20rpx 6rpx rgba(51, 51, 51, 0.1);
			padding: 8px;


			.address-item-top {
				display: flex;
				justify-items: center;
				align-items: center;

				.address-item-top-left {
					font-weight: bold;
					font-size: 14px;
					width: 20%;
					display: flex;
					justify-items: center;
					align-items: center;
					text-align: center;
				}

				.address-item-top-right {
					width: 80%;
					display: flex;
					justify-items: center;
					align-items: center;

					.box {
						font-size: 14px;
						padding: 12px;
						background-color: #f1f1f1;
						margin-right: 10px;
						font-weight: bold;
						border-radius: 10px;
					}

					/* 选中样式 */
					.box.selected {
						background-color: #ffeaea;
						/* 浅红色背景 */
						color: #ff0000;
						/* 红色文字 */
						border-color: #ff0000;
						/* 红色边框 */
					}
				}
			}



		}

		.add-address-btn {
			position: fixed;
			z-index: 99;
			bottom: 120rpx;
			width: calc(100% - 30rpx);
			margin: auto;
			height: 80rpx;
			border-radius: 15rpx;
			background-color: red;
			color: #fff;
			font-size: 22px;
			text-align: center;
			line-height: 80rpx;
			letter-spacing: 4rpx;
			font-size: 14px;
		}
	}
</style>